<template>
  <a-card :bordered='false'>
    <search ref='search' :config='searchConfig' @search='search' @getHeight='getHeight' />
    <div class='page_table'>
      <vxe-grid
        ref='xGrid'
        :border='true'
        :resizable='true'
        :showOverflow='true'
        size='mini'
        :loading='loading'
        :height='pageHeight-seachHeight-90'
        :align='left'
        :columns='columns'
        :data='dataSource'
       :checkbox-config="checkboxConfig"
        v-bind='vexConfig'
        @checkbox-change='selectChangeEvent'
        @checkbox-all='selectChangeEvent'
      >
        <template #userType='{row }'>
          {{ row.userType == 1 ? '内部用户' : '外部用户' }}
        </template>
        <span slot='action' slot-scope='{row:record}'>
          <a @click='handleJson(record)' v-if='record.businessJson'>JSON对比</a>
        </span>

        <template #pager>
          <vxe-pager
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :currentPage.sync='ipagination.current'
            :page-size.sync='ipagination.pageSize'
            :total='ipagination.total'
            :pageSizes='ipagination.pageSizeOptions'
            @page-change='handlePageChange'>
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>

    <jsonContrast :visible-one.sync='visibleOne' :json-new='jsonNew' :json-old='jsonOld'></jsonContrast>
    <form-add-edit ref='formAdd' @ok='modelFormOk'></form-add-edit>
  </a-card>
</template>

<script>
import FormAddEdit from '@comp/view/base-crud/form/FormAddEdit'
import { PageListMixin } from '@/mixins/PageListMixin'
import jsonContrast from '../modules/JsonContrasts'


export default {
  name: 'product-list',
  mixins: [PageListMixin],
  components: {
    FormAddEdit,
    jsonContrast
  },
  data() {
    return {
      description: '业务日志',
      visibleOne: false,
      jsonOld: '',
      jsonNew: '',
      searchConfig: [
        {
          type: 'input',
          name: 'businessName',
          placeholder: '业务名称'
        },
        {
          type: 'a-select',
          name: 'operType',
          placeholder: '请选择操作类型',
          option: [
            {
              name:'新增',
              value:'新增'
            },
            {
              name: '修改',
              value:'修改'
            },
            {
              name: '删除',
              value:'删除'
            }]
        },
        {
          type: 'input',
          name: 'createName',
          placeholder: '操作人'
        },
        {
          type: 'date',
          name: 'createTime',
          placeholder: '操作时间'
        },
      ],
      columns: [

        {
          title: '操作类型',
          align: 'center',
          ellipsis: true,
          field: 'operType',
          minWidth: 30,
        },
        {
          title: '业务名称',
          align: 'center',
          field: 'businessName',
          ellipsis: true
        },
        {
          title: '业务对象',
          align: 'center',
          ellipsis: true,
          field: 'businessJson'
        },
        {
          title: '操作人',
          align: 'center',
          ellipsis: true,
          field: 'createName'
        },
        {
          title: '操作时间',
          align: 'center',
          ellipsis: true,
          field: 'createTime'
        },
        {
          title: '操作',
          field: 'action',
          align: 'center',
          fixed: 'right',
          width: 120,
          slots: {
            default: 'action'
          }
        }
      ],
      url: {
        list: window._CONFIG['domianMqURL'] + '/logApi/findBusinessPageList'
      }
    }
  },
  created() {
  },
  methods: {
    handleJson(row) {
      this.visibleOne = true
      this.jsonOld = JSON.parse(row.oldBusinessJson)
      this.jsonNew = JSON.parse(row.businessJson)
    },
    handlePaginationChange(value) {
      this.ipagination.pageSize = value
      this.ipagination.current = 1
      this.loadData()
    },
    paginationCurrent(value) {
      if (value == 1) {
        if (this.ipagination.current > 1) {
          this.ipagination.current--
          this.loadData()
        } else {
          this.$message.info('已经是第一页了哦！')
        }
      } else {
        this.ipagination.current++
        this.loadData()
      }
    }
  }
}
</script>
<style lang='less' scoped>
@import '~@assets/less/common.less';

.pagination {
  text-align: right;
  width: 100%;
  padding: 8px 0;
  background-color: #FFFFFF;

  .div-box {
    height: 24px;
    line-height: 22px;
    font-size: 13px;
    display: inline-block;
    border: 1px solid #d9d9d9;
    padding: 0 8px;
    border-radius: 5px;
    margin-right: 10px;
  }

  .div-box:hover {
    background-color: #00A0E9;
    color: #FFFFFF;
    border-color: transparent;
  }
}
</style>